<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>首页</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/vant.css">
    <link rel="stylesheet" href="../../css/main.css">
    <style>
        .main {
            margin-top: 0.85rem;
        }
    </style>
</head>

<body>
    <div class="app" v-cloak>
        <div class="header-common">
            <div class="flex-x-s header">
                <span class="iconfont goback" @click="backPage">&#xe66f;</span>
                <div class="search flex-x-s" @click="showSearchPage">
                    <span class="iconfont">&#xe71e;</span>
                    <input type="search" maxlength="20" placeholder="请输入搜索关键词" v-model="keyword"
                        @search="getSearchData">
                </div>
                <div class="search-btn" @click="getSearchData">搜索</div>
            </div>
            <div v-if="!isShowSearchPage" class="diquxuanze">
                <div class="near-pos-text">
                    最近访问
                </div>
                <div class="near-pos-items">
                    <div class="pos-active near-pos-item" @click="selectBrand(city)" v-for="city in listselectBrand"
                        :key="city.id">
                        {{filterText(city.name)}}
                    </div>
                </div>
            </div>
            <div v-else>
                <div class="city-list">
                    <van-list v-model="loading" :finished="finished" :error="errorStatus" finished-text="没有更多了">
                        <van-cell v-for="(city, index) in listSearch" :key="index" :title="city.name"
                            @click="selectBrand(city)" />
                    </van-list>
                </div>
            </div>
        </div>
    </div>

    </div>
    <script src="../../script/api.js "></script>
    <script src="../../script/flexible.js "></script>
    <script src="../../script/fastclick.js "></script>
    <script src="../../script/vue.min.js "></script>
    <script src="../../script/iconfont.js "></script>
    <script src="../../script/vant.min.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/restful.js"></script>
    <script src="../../script/businessCommon.js"></script>


    <script>
        apiready = function () {
            vm = new Vue({
                el: '.app',
                data() {
                    return {
                        loading: false,
                        finished: true,
                        errorStatus: false,
                        listselectBrand: [],
                        brandList: [],
                        activeCity: 1,
                        isShowSearchPage: false,
                        keyword: null,
                        listSearch: [],
                    }
                },
                mounted() {
                    this.listselectBrand = $api.getStorage('selectBrand') || [];
                    //从发布配件页进入该页面 没有全部品牌
                    if (!api.pageParam.comefrom || api.pageParam.comefrom != 'editPart') {
                        this.listselectBrand.unshift({
                            id: -1,
                            name: '全部'
                        })
                    }
                    this.getBrandsData()
                },
                methods: {
                    backPage() {
                        if (this.isShowSearchPage) {
                            this.isShowSearchPage = false
                            this.controlShowSearch(false)
                        } else {
                            api.closeWin();
                        }
                    },
                    showSearchPage() {
                        this.controlShowSearch(true)
                        this.isShowSearchPage = true
                    },
                    controlShowSearch(isShow) {
                        api.sendEvent({
                            name: 'showSearchPage',
                            extra: { isShow: isShow }
                        });
                    },
                    getSearchData: function () {
                        let vm = this
                        common("getBrands")(vm.keyword, function (ret) {
                            let data = [];
                            if (ret.data.list && ret.data.list.length > 0) {
                                ret.data.list.forEach(list => {
                                    data.push({ id: list.id, name: list.name, customerTypes: list.imageUrl })
                                })
                            } else {
                                data.push({ id: null, value: "暂无数据", customerTypes: null })
                            }
                            vm.listSearch = data
                        });
                    },
                    getBrandsData: function () {
                        var vm = this
                        common("getBrands")('', function (ret) {
                            var listBrand = new Array(26);
                            if (ret.data.list && ret.data.list.length > 0) {
                                var list = ret.data.list
                                var words = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
                                words.map((item, index) => {
                                    listBrand[index] = {
                                        index: item,
                                        list: []
                                    }
                                })
                                list.map((item) => {
                                    let index = words.indexOf(item.initial.toUpperCase());
                                    listBrand[index].list.push({
                                        img: item.imageUrl,
                                        title: item.name,
                                        name: item.name,
                                        id: item.id
                                    });
                                })
                            }
                            listBrand = listBrand.filter(item => {
                                return item.list.length > 0
                            })
                            vm.brandList = listBrand
                            vm.openFrame()
                        });
                    },
                    openFrame() {
                        var header = $api.dom('.header-common');
                        var headerH = $api.fixStatusBar(header);
                        api.openFrame({
                            name: 'brand_select_frm',
                            url: 'brand_select_frm.html',
                            rect: {
                                marginTop: headerH,
                                marginBottom: 0,
                                w: 'auto'
                            },
                            pageParam: {
                                brandList: this.brandList
                            }
                        });
                    },
                    selectBrand(brand) {
                        var listBrand = $api.getStorage('selectBrand') || [];
                        var index = listBrand.findIndex(target => {
                            return target.name == brand.name
                        })
                        if (index > -1) {
                            listBrand.splice(index, 1)
                        }
                        if (brand.name !== '全部') {
                            if (listBrand.length >= 5) {
                                listBrand.splice(-1, 1)
                            }
                            listBrand.unshift(brand)
                        }
                        $api.setStorage('selectBrand', listBrand);
                        if(api.pageParam.comefrom == 'editPart'){
                            api.sendEvent({
                            name: 'selectPartBrand',
                            extra: {
                                brand: brand,
                                status: api.pageParam.status
                            }
                        });
                        }else{
                            api.sendEvent({
                            name: 'selectBrand',
                            extra: {
                                brand: brand,
                                status: api.pageParam.status
                            }
                        });
                        }
               
                        api.closeWin();
                    }
                },
            })
            api.addEventListener({
                name: 'notice_brand_select'
            }, function (ret, err) {
                vm.selectBrand(ret.value.brand)
            });
        }
    </script>
</body>

</html>